<template>
  <div class="home-recommond">
    <div class="wrapper" ref="wrapper">
      <ul class="content" ref="content">
        <li v-for="(item,index) in listData" :key="index">
          <div class="cover">
            <van-image :src="item.cover" radius="1rem" />
            <span>{{item.listen_num | numFilter(1)}}万</span>
          </div>
          <span>{{ item.title }}</span>
        </li>
      </ul>
    </div>                
  </div>
</template>

<script>
import BScroll from "better-scroll";//引入betterscroll
export default{
    data(){
        return{
            listData:[]
        }
    },
    /**
     * 一个vue实例被生成后会调用created函数
     * 一般可以在此函数中调用ajax获取页面初始化所需的数据
     */
    created(){
        this.getSongListData()
    },

    methods:{
        //获取推荐歌单数据
        getSongListData(){
            this.$request('get','/recommend/playlist/u')
            .then(res =>{
                console.log(res);
                if(res.result == 100){
                    this.listData = res.data.list;
                }
                //异步数据的一些处理
                this.betterScrollHorizontal();//调用横向滚动的方法
            })
        },
        //封装一个横向滚动的方法
        betterScrollHorizontal(num, itemWidth){
            //计算内容区(content)的宽度
            this.$refs.content.style.width = num * itemWidth + "rem";
            this.$nextTick(()=>{
                //wrapper为template中容器的ref，表示给那个元素来设置滚动
                this.scroll = new BScroll(this.$refs.wrapper, {
                    scrollY: false,//关闭纵向滚动
                    scrollX: true,//横向滚动
                    startX: 0, //横向滚动的开始位置
                })
        })
     },
  },
  filters:{
    //处理播放量的显示格式
    /**
     * param num:小数位固定的位数
     * param value:处理的数值
     */
    numFilter(value,num){
        //把小数位固定为num位
        return parseFloat(value/10000).toFixed(num)
    }
  }
};
</script>

<style scoped>
/* .home-recommond>ul{
    display: flex;
    flex-wrap: wrap;
}
.home-recommond>ul>li{
    width: calc((100% - 1rem) / 3 * 1);
}
.home-recommond>ul>li:nth-of-type(3n+2){
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}*/
.cover{
    position: relative;
}
.cover>span{
    position: absolute;
    right: 0.2rem;
    bottom: 0.4rem;
    background-color: #a6a0a0;
    color: white;
    font-size: 14px;
    border-radius: 1rem;
    width: 5rem;
    display: inline-block;
} 
.wrapper {
    width: 100%;
    overflow: hidden;
}
/* ul.content {
    width: calc(12 * 10rem);
} */
ul.content li {
    display: inline-block;
    width: 10rem;
    vertical-align: top;
}
ul.content li * {
    margin: 0.1rem;
}
ul.content li >span {
    font-size: 0.8rem;
    color: #54493b;
}
</style>